import React, { useRef, useEffect } from 'react';

import { withMenu } from '~/components/Menu';
import Foot from '~/components/Foot';

import { XmlEmpty } from '~/utils/const';

import Properties from '~/components/Properties';

import useBpmn from '~/utils/useBpmn';

const Edit = (props) => {
  const { modeler, start, loadXml, print, download, redo, undo, setForm, simulate } = useBpmn();

  useEffect(() => {
    start('#canvas');
    loadXml(XmlEmpty);
  }, []);

  return (
    <div className="page-bpmn-model">
      <div className="page-left bjs-canvas" id="canvas"></div>
      <Foot
        onImport={loadXml}
        print={print}
        download={download}
        redo={redo}
        undo={undo}
        setForm={setForm}
        simulate={simulate}
      />
      <div className="page-right" id="properties-panel">
        <Properties modeler={modeler} />
      </div>
    </div>
  );
};

export default withMenu(Edit);
